import { View, Text } from '@tarojs/components'
import { Grid, GridItem } from '@nutui/nutui-react-taro'
import React from 'react'
import './index.less'

export interface Achievement {
  /** 数字 */
  number: string
  /** 标签 */
  label: string
  /** 图标 */
  icon?: React.ReactNode
}

export interface AchievementGridProps {
  /** 成就数据列表 */
  achievements: Achievement[]
  /** 列数 */
  columns?: number
  /** 间距 */
  gap?: number
  /** 自定义类名 */
  className?: string
}

/**
 * AchievementGrid 成就数据展示网格组件
 * 用于展示公司数据、成就等信息
 */
const AchievementGrid: React.FC<AchievementGridProps> = ({
  achievements,
  columns = 2,
  gap = 10,
  className = '',
}) => {
  return (
    <Grid columns={columns} gap={gap} className={`achievement-grid ${className}`}>
      {achievements.map((item, index) => (
        <GridItem key={index}>
          <View className='achievement-item'>
            {item.icon && <View className='achievement-icon'>{item.icon}</View>}
            <Text className='achievement-number'>{item.number}</Text>
            <Text className='achievement-label'>{item.label}</Text>
          </View>
        </GridItem>
      ))}
    </Grid>
  )
}

export default AchievementGrid

